<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				Swiper轮播图
			</div>
			<div class="sub-title quote">
				轮播图包含&lt;gr-swiper&gt;、&lt;gr-swiper-item&gt;两个组件<br>你只需要引入Swiper，即可使用两个组件。
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			
			<div class="example-title">关闭分页器</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>
			
			<div class="example-title">自定义分页器</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
				<template slot="code-js">{{ jsCode4 }}</template>
			</code-view>
			
			<br>
			
			<div id="parameter-list" class="example-title">&lt;gr-swiper&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="150">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="190">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="110">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="100">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">&lt;gr-swiper&gt;事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="方法名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="方法说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/swiperdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
jsCode1: `import {Swiper} from 'gabriel-ui'
Vue.use(Swiper)`,
htmlCode2: `<gr-swiper>
	<gr-swiper-item>A</gr-swiper-item>
	<gr-swiper-item>B</gr-swiper-item>
	<gr-swiper-item>C</gr-swiper-item>
</gr-swiper>

<style>
	.gr-swiper-item {
		height: 140px;
		line-height: 140px;
		text-align: center;
		color: white;
		font-size: 1.5rem;
		background-color: #55aaff;
	}
</style>`,
htmlCode3: `<gr-swiper :pagination="false">
	<gr-swiper-item>A</gr-swiper-item>
	<gr-swiper-item>B</gr-swiper-item>
	<gr-swiper-item>C</gr-swiper-item>
</gr-swiper>`,
htmlCode4: `<gr-swiper  @change="onChange">
	<gr-swiper-item>A</gr-swiper-item>
	<gr-swiper-item>B</gr-swiper-item>
	<gr-swiper-item>C</gr-swiper-item>
	<template slot="custom-pagination">
		<div class="page_num">{{ current + 1 }}/3</div>
	</template>
</gr-swiper>`,
jsCode4: `export default {
	data() {
		return {
			current: 0
		}
	},
	methods: {
		onChange(index) {
			this.current = index;
		}
	}
}`,
				propertiesExplain1: [
					{
						attrName: 'autoplay',
						introduce: `是否自动开启轮播`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'true'
					},
					{
						attrName: 'interval',
						introduce: `轮播切换时间间隔，单位ms`,
						type: 'String / Number',
						optionValues: '----',
						defaultValue: '3000'
					},
					{
						attrName: 'init-index',
						introduce: `处置位置索引`,
						type: 'String / Number',
						optionValues: '----',
						defaultValue: '0'
					},
					{
						attrName: 'navigation',
						introduce: `是否开启指示器`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'vertical',
						introduce: `是否为垂直滚动`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'touchable',
						introduce: `是否允许手指滑动切换`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
				],
				propertiesExplain2: [
					{
						attrName: 'change',
						introduce: `状态改变时触发该事件`,
						param: '绑定的value值'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			click(e) {
				this.$toast.show('这是一个吐司提示', 1000)
			}
		}
	}
</script>

<style lang="scss">
	
</style>
